<template>
	<view class="level" :style="css.page+'min-height:'+$xyfun.xysys().windowHeight+'px'" v-if="!isLoading">
		<view class="head-wrap" :style="css.nbg">
			<view class="flex level p-lr-30 tc-w">
				<view>
					<view class="ts-50 tb p-t-50">{{user.info.level ? user.info.level.name :'无'}}</view>
					<view class="title ts-28 m-t-15">我的等级</view>
				</view>
				<view class="m-l-auto">
					<view class="m-t-50 ts-26 lbtn p-lr-25 m-b-20" :style="css.prbg" @tap="$xyfun.to('/pages/user/balance/recharge')">充值升级</view>
					<view class="lbtn ts-26 p-lr-25" :style="css.prbg" @tap="$xyfun.to('/pages/store/venue')">定场升级</view>
				</view>
			</view>
		</view>
		
		<view class="bc-w m-30 br-10 p-30">
			<view class="title tb ts-32 lh-32 flex">
				<view class="line m-r-10" :style="css.mcbg"></view>等级说明
			</view>
			
			<view class="level-list">
				<view class="m-t-30" >
					<view class="m-b-25" v-for="(item,index) in levelList" :key="index">
						<view class="tb m-b-10">{{item.name}}</view>
						<view class="ts-28" >{{item.remark}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { mapState,mapActions } from 'vuex';
	export default {
		data() {
			return {
				isLoading:true,
				levelList:[],
				css:{},
			}
		},
		computed: {
			...mapState(['common','user'])
		},
		async onLoad() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.loadData();
		},
		methods: {
			...mapActions('user',{'getUserInfo':'getInfo'}),
			loadData(){
				this.getUserInfo();
				
				this.$api.get({
					url: '/common/level',
					loadingTip:'加载中...',
					success: res => {
						this.isLoading = false;
						this.levelList = res;
					}
				});
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.head-wrap{
		height: 200rpx;
	}
	.lbtn{height: 50rpx;line-height: 50rpx;border-radius: 25rpx;}
	.line{width: 6rpx;border-radius: 5rpx;height: 30rpx;}
</style>